import 'dart:async';
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:luckiness/utils/general.dart';

class CoffeePay extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CoffeePayState();
  }
}

class CoffeePayState extends State<CoffeePay> {

  Timer timer;
  int totalSeconds = 300;
  double scale = 1.0;
  int selectIndex = 0;
  bool isAgreeProtocol = true;
  /// 创建计时器
  void ffCreateTimer() {
    timer = Timer.periodic(Duration(seconds: 1), (timer){
      setState(() {
        totalSeconds -= 1;
        if (totalSeconds <= 0) {
          timer.cancel();
        }        
      });
    });
  }

  @override
  void initState() {
    ffCreateTimer();
    super.initState();
  }
  
  @override
  void dispose() {
    if (timer.isActive) {
      timer.cancel();
    }
    super.dispose();
  }

  Widget ffCountDownWidget() {
    TextStyle defaultts = TextStyle(fontSize:13 * scale, color: Color.fromRGBO(56, 56, 56, 1.0));
    TextStyle highLightts = TextStyle(fontSize:13 * scale, color:Color.fromRGBO(144, 192, 239, 1.0));
    Padding pad = Padding(
      padding: EdgeInsets.symmetric(vertical:6 * scale),
      child: Text.rich(
        TextSpan(
          text:'请在',
          style:defaultts,
          children: [
            TextSpan(
              text:'${totalSeconds ~/ 60}分${totalSeconds % 60}秒',
              style:highLightts,
            ),
            TextSpan(
              text:'内完成支付，过时订单将被取消。',
              style:defaultts,
            ),
          ]
        )
      ),
    );
    return Row(
      mainAxisAlignment:MainAxisAlignment.center,
      children: <Widget>[
        pad,
      ],
    );
  }

  Widget ffRow(int index, String text) {
    Row row =  Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Icon(Icons.credit_card, size: 34,),
        Expanded(
          child: Padding(
            padding: EdgeInsets.only(left:10*scale),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.symmetric(vertical:20 * scale),
                  child: Text(text, style:TextStyle(fontSize:15 * scale, color:Color.fromRGBO(80, 80, 80, 1.0))),
                ),
                index == 0 ? Icon(Icons.recent_actors, size: 30,) : Container(),
              ],
            ),
          ),
        ),
        Icon(selectIndex == index ? Icons.radio_button_checked : Icons.radio_button_unchecked, size: 26),            
      ],
    );
    return GestureDetector(
      onTap:(){
        if (index != selectIndex) {
          setState(()=>selectIndex = index);
        }
      },
      child:Container(        
        decoration: BoxDecoration(
          border:Border(bottom: BorderSide(color:Color.fromRGBO(242, 242, 242, 1.0))),
          color: Colors.white,
        ),
        child:Padding(padding: EdgeInsets.symmetric(horizontal:15.0 * scale), child:row),
      )
    );
  }

  Widget ffPayProtocol() {
    TextStyle defaultTS = TextStyle(fontSize: 11 *scale, color: Color.fromRGBO(128, 128, 128, 1.0));
    TextStyle highLightTS = TextStyle(fontSize: 11 *scale, color: Color.fromRGBO(85, 122, 157, 1.0));
    Widget wid = GestureDetector(
      onTap:(){
        setState(() {
          isAgreeProtocol = !isAgreeProtocol;
        });
      },
      child: Padding(
        padding: EdgeInsets.fromLTRB(15 * scale, 10 * scale, 15 * scale, 10 * scale),
        child:Row(
          children: <Widget>[
            Icon(isAgreeProtocol ? Icons.check_box : Icons.check_box_outline_blank, size:20, color: Color.fromRGBO(144, 192, 239, 1.0),),
            Text.rich(
              TextSpan(
                children: [
                  TextSpan(
                    text:' 我已阅读并同意 《',
                    style:defaultTS,
                  ),
                  TextSpan(
                    text:'支付协议',
                    style:highLightTS,
                  ),
                  TextSpan(
                    text:'》',
                    style:defaultTS,
                  ),
                ]
                
              )
            )
          ],
        )
      ),
    );
    return wid;
  }

  Widget ffPayBtn() {
    Padding pad = Padding(
      padding: EdgeInsets.symmetric(horizontal:15 * scale),
      child:FlatButton(
        onPressed: (){
          Navigator.of(context).pushNamed('evaluatePage');
        }, 
        child: Text('确认支付', style:TextStyle(fontSize: 16, fontWeight:FontWeight.bold)),
        textColor: Colors.white,
        color: Color.fromRGBO(144, 192, 239, 1.0),
      ),
    );
    return Row(
      children:[
        Container(
          width: screenWidth(context),
          decoration: BoxDecoration(
            borderRadius:BorderRadius.circular(5.0),
          ),
          child: pad,)
      ]
    );
  }
  @override
  Widget build(BuildContext context) {
    scale = widthScale(context);
    return Scaffold(
      appBar:AppBar(
        title: Text('支付中心'),
      ),
      body: Container(
        color:Color.fromRGBO(244, 244, 244, 1.0),
        child:Column(
          mainAxisSize: MainAxisSize.min,

          children: <Widget>[
            ffCountDownWidget(),
            ffRow(0, '微信支付'),
            ffRow(1, '支付宝支付'),
            ffRow(2, '银联支付'),
            ffPayProtocol(),
            ffPayBtn(),
          ],)
      ),
    );
  }

}